<template>
  <div class="news-section">
    <h2 class="section-title">历史行程</h2>
    <div class="news-container">
      <el-timeline>
        <el-timeline-item
            v-for="(news, index) in newsList"
            :key="news.id"
            :timestamp="news.date"
            placement="top"
        >
          <el-card>
            <h3>{{ news.title }}</h3>
            <p>{{ news.summary }}</p>
            <el-button type="primary" @click="viewDetail(news.id)"
            >阅读全文</el-button
            >
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="pagination">
        <el-pagination
            layout="prev, pager, next"
            :total="50"
            :page-size="5"
            @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const newsList = [
  {
    id: 1,
    title: '腾讯发布2023年第一季度财报',
    date: '2023-05-15',
    summary:
        '腾讯控股有限公司今天公布了截至2023年3月31日的第一季度未经审核综合业绩...'
  },
  {
    id: 2,
    title: '腾讯云宣布多项产品降价',
    date: '2023-05-10',
    summary:
        '腾讯云宣布对部分核心产品进行价格调整，最高降幅达40%，进一步降低企业上云成本...'
  },
  {
    id: 3,
    title: '微信小程序日活跃用户突破6亿',
    date: '2023-05-05',
    summary:
        '微信官方数据显示，微信小程序日活跃用户数已突破6亿，同比增长30%...'
  },
  {
    id: 4,
    title: '腾讯游戏发布未成年人保护新措施',
    date: '2023-04-28',
    summary:
        '腾讯游戏宣布升级未成年人保护措施，推出"成长守护平台"新功能...'
  },
  {
    id: 5,
    title: '腾讯与联合国教科文组织达成战略合作',
    date: '2023-04-20',
    summary:
        '腾讯与联合国教科文组织签署战略合作协议，共同推动数字技术在文化保护和教育领域的应用...'
  }
]

const viewDetail = (id) => {
  router.push(`/news/${id}`)
}

const handlePageChange = (currentPage) => {
  console.log('当前页:', currentPage)
  // 这里可以添加获取对应页码数据的逻辑
}
</script>

<style scoped>
.news-section {
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #333;
}

.news-container {
  padding: 0 20px;
}

.el-timeline {
  padding-left: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.el-card h3 {
  margin-bottom: 10px;
  color: #333;
}

.el-card p {
  color: #666;
  margin-bottom: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
